<template>
  <div>
    <div
      ref="header"
    >
      <CityHeader></CityHeader>
      <CitySearch :cities="cities"></CitySearch>
    </div>
    <CityList
      :cities="cities"
      :hotCities="hotCities"
      :letter="letter"
    ></CityList>
    <CityAlphabet
      :alphabet="alphabet"
      @change="handleLetterChange"
      :headerHeight="headerHeight"
    ></CityAlphabet>
  </div>
</template>

<script>
import CityHeader from './components/Header.vue'
import CitySearch from './components/Search.vue'
import CityList from './components/List.vue'
import CityAlphabet from './components/Alphabet.vue'
import axios from 'axios'
export default {
  name: 'City',
  components: {
    CityHeader,
    CitySearch,
    CityList,
    CityAlphabet
  },
  data () {
    return {
      cities: {},
      hotCities: [],
      letter: '',
      headerHeight: 0
    }
  },
  computed: {
    alphabet () {
      return Object.keys(this.cities)
    }
  },
  methods: {
    getCityInfo () {
      axios.get('/api/city.json')
        .then((res) => {
          res = res.data
          if (res.ret && res.data) {
            const data = res.data
            this.cities = data.cities
            this.hotCities = data.hotCities
          }
        })
    },
    handleLetterChange (letter) {
      this.letter = letter
    }
  },
  mounted () {
    this.getCityInfo()
    // 获取头部的高度 - 包括 Header 组件与 Search 组件
    this.headerHeight = this.$refs.header.offsetHeight
  }
}
</script>

<style lang="stylus" scoped>
</style>
